<template>
  <div class="video-list">
    <!-- 筛选器 -->
    <div class="filters">
      <t-select v-model="selectedPlatform" @change="handlePlatformChange" clearable>
        <t-option v-for="item in platforms" :key="item.value" :value="item.value" :label="item.label" />
      </t-select>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-state">
      <t-loading />
    </div>

    <!-- 视频网格 -->
    <div v-else class="video-grid">
      <div v-for="video in videos" :key="video.id" class="video-item">
        <video-player :note-id="video.id" :platform="video.platform" />
        <div class="video-info">
          <h3>{{ video.title }}</h3>
          <p class="platform-tag">{{ getPlatformLabel(video.platform) }}</p>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <t-empty v-if="!isLoading && (!videos || videos.length === 0)" />

    <!-- 分页器 -->
    <t-pagination
      v-if="totalCount > 0"
      v-model="currentPage"
      :total="totalCount"
      :page-size="pageSize"
      @change="handlePageChange"
    />
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue';
import { mapState } from 'vuex';

export default {
  name: 'VideoList',
  components: {
    VideoPlayer,
  },
  data() {
    return {
      videos: [
        { id: 2, title: '视频标题2', platform: 'bilibili' },
        { id: 3, title: '视频标题3', platform: 'youtube' },
      ],
      currentPage: 1,
      pageSize: 12,
      totalCount: 0,
      selectedPlatform: '',
      platforms: [
        { value: '', label: '全部' },
        { value: 'youtube', label: 'YouTube' },
        { value: 'bilibili', label: 'Bilibili' },
      ],
      isLoading: false,
    };
  },
  computed: {
    ...mapState('record', ['selectedBizId']),
  },
  watch: {
    selectedBizId: {
      immediate: true,
      handler() {
        this.fetchVideos();
      },
    },
  },
  created() {
    this.fetchVideos();
  },
  methods: {
    getPlatformLabel(platform) {
      const found = this.platforms.find((p) => p.value === platform);
      return found ? found.label : '未知平台';
    },
    async fetchVideos() {
      if (!this.selectedBizId) return;

      this.isLoading = true;
      try {
        const params = {
          biz_id: this.selectedBizId,
          page: this.currentPage,
          page_size: this.pageSize,
          platform: this.selectedPlatform,
        };
        const res = await this.$api.Video.getList(params);
        this.videos = res.data.items;
        this.totalCount = res.data.total;
      } catch (error) {
        console.error('获取视频列表失败:', error);
        this.$message.error('获取视频列表失败');
      } finally {
        this.isLoading = false;
      }
    },
    handlePlatformChange() {
      this.currentPage = 1;
      this.fetchVideos();
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchVideos();
    },
  },
};
</script>

<style lang="less" scoped>
.video-list {
  padding: 20px;

  .filters {
    margin-bottom: 20px;
  }

  .loading-state {
    display: flex;
    justify-content: center;
    padding: 40px 0;
  }

  .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
  }

  .video-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;

    &:hover {
      transform: translateY(-2px);
    }

    .video-info {
      padding: 10px;

      h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1.4;
      }

      .platform-tag {
        margin: 5px 0 0;
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>
